<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <!-- 事实上现在很多的列表功能采用了不同的方案来实现:
口 方案一: 使用div元素来实现(比如汽车之家知乎上的很多列表)
口 方案二: 使用列表元素，使用元素语义化的方式实现;
更加不拘一格事实上现在很多的网站对于列表元察没有很强烈的偏好,按照自己的风格来布局:
口原因是列表元素默认的CSS样式让它用起来不是非常方便:
口 比如列表元素往往有很多的限制,ul/ol中只能存放li,li再存放其他元素,默认样式等:
口虽然我们可以通过重置来解决,但是我们更喜欢自由的div; -->

  <!-- HTML提供了3组常用的用来展示列表的元素
口有序列表，ol、li
口 无序列表: ul、li
口定义列表: dl、dt、dd -->
  <style>
    ol, ul, li {
      padding: 0;
      margin: 0;
      list-style: none;
      list-style-type: none;
    }
    /* ul{
        list-style-type: decimal;
     } */
     dl, dt, dd{
        padding: 0;
        margin: 0;
     }
     dt {
        font-size: 20px;
        font-weight: 700;
        margin: 10px 0;
     }
     dd{
        margin: 10px 0 0 20px;
     }
  </style>
  <body>
    <h1>排名</h1>
    <ol>
      <li>星际穿越</li>
      <li>越狱</li>
      <li>蜘蛛侠</li>
      <li>闪电侠</li>
      <li>变形金刚</li>
      <li>美国队长</li>
    </ol>

    <h1>常见的编程语言</h1>
    <ul>
      <li>JavaScript</li>
      <li>Java</li>
      <li>C++</li>
      <li>Swift</li>
      <li>Ruby</li>
      <li>Python</li>
      <li>Go</li>
    </ul>

    <!--列出前端开发各个阶段 -->
    <h1>前端开发</h1>
    <d1>
      <dt>阶段一:打好基础</dt>
      <dd>HTML</dd>
      <dd>css</dd>
      <dd>JavaScript</dd>
      <dd>JavaScript DOM</dd>
      <dd>JavaScript BOM</dd>
      <dd>JavaScript高级语法</dd>

      <dt>阶段二:框架实战</dt>
      <dd>Node基</dd>
      <dd>Webpack基础</dd>
      <dd>Git源代码管理</dd>
      <dd>Vue框架实战</dd>
      <dd>React框架实战</dd>
      <dd>小程序+云开发</dd>
      <dd>uniapp+taro</dd>
      
      <dt>阶段三:课程进阶</dt>
      <dd>TS</dd>
      <dd>vue+TS</dd>
      <dd>react+TS</dd>
      <dd>nod/开发脚手架/node服务器开发/mysql</dd>
      <dd>webpack高级/性能优化/vite/rollup/gulp</dd>
      <dd>数据结构和算法</dd>
    </d1>
  </body>
</html>
